<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
	body
	{
		margin:30px;
	}
	div {
		padding: 35px;
		border:1px solid black;
		background-position: left;
		background: url(http://www.w3school.com.cn/i/border.png) no-repeat;
	}
	#div1 {
		background-origin: border-box;
	}
	#div2 {
		background-origin: content-box;
		/*img和内容位于同一垂直线*/
	}
	#div3 {
		background-origin: padding-box;
	}
	</style>
<!-- 相对于内容框来定位背景图像：
	IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。
	定义和用法
background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

语法
background-origin: padding-box|border-box|content-box;


padding-box	背景图像相对于内边距框来定位。	
border-box	背景图像相对于边框盒来定位。	
content-box	背景图像相对于内容框来定位。
-->
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。
</div>
<p>background-origin:padding-box:</p>
<div id="div3">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。
</div>
</body>
</html>